<section class="content-header">
    <h1>
        {{title}}
        <!-- <small>Control panel</small> -->
    </h1>
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-3 col-md-push-9">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">查询区域</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="form-group">
                        <label>区域</label>
                        <dx-select-box #subArea style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px"
                            [items]="subAreaItems" displayExpr="subArea" [(selectedItem)]="subAareSelected"
                            (onValueChanged)="onSubAreaSelectedChange($event)" [value]="subAreaItems[0]"
                            [searchEnabled]="true">
                        </dx-select-box>
                    </div>
                </div>
                <div class="box-footer">
                    <button type="button" class="btn btn-primary" (click)="getReportData()"> 查 询 </button>
                </div>
            </div>
        </div>
        <div class="col-md-9 col-md-pull-3">
            <!-- /.box-header -->
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">全业务链配置</h3>
                    <div class="box-tools pull-right">
                        <button type="button" (click)="saveChanges()" class="btn btn-info btn-sm" data-toggle="tooltip"
                            title="保存">
                            <i class="fa fa-save"></i>
                        </button>
                        <button type="button" (click)="openInsertDialog()" class="btn btn-primary btn-sm"
                            data-toggle="modal" data-target="#template">
                            添加
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <dx-data-grid [dataSource]="tmscListUrl" [showColumnLines]="true" [showRowLines]="true"
                        [showBorders]="true" [rowAlternationEnabled]="true">
                        <dxo-paging [pageSize]="12"></dxo-paging>
                        <dxo-editing mode="cell" [allowUpdating]="true">
                        </dxo-editing>
                        <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 100]" [showInfo]="true">
                        </dxo-pager>
                        <dxi-column [allowEditing]="false" dataField="rowNumber" caption="ID" [width]="100">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="subArea" caption="区域" [width]="160">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="doTimeP" caption="实施日期" [width]="160">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="responsePersonA" caption="责任人" [width]="260">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="demandPerson" caption="需求人" >
                        </dxi-column>

                    </dx-data-grid>
                </div>
            </div>

        </div>
    </div>
    <!-- /.添加数据dialog -->
    <div class="modal fade" id="InsertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">

                    <h4 class="modal-title" id="myModalLabel">添加数据</h4>
                </div>
                <div class="modal-body">


                    <table class="table">
                        <tr>
                            <td>
                                <div class="form-group">
                                    <label>区域</label>
                                    <dx-select-box #subArea
                                        style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px"
                                        [items]="subAreaItems" displayExpr="subArea" [(selectedItem)]="subAareSelected"
                                        (onValueChanged)="onSubAreaSelectedChange($event)" [value]="subAreaItems[0]"
                                        [searchEnabled]="true">
                                    </dx-select-box>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="form-group">
                                    <button type="button" class="btn btn-sm" (click)="addUser(1)" title="添加">
                                        责任人:{{userStr(1)}}
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="form-group">
                                    <button type="button" class="btn btn-sm" (click)="addUser(2)"  title="添加">
                                        需求人:{{userStr(2)}}
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="form-group">
                                    <label for="optimizeTheExchangePrice">实施日期</label>
                                    <!-- <input [(ngModel)]="dialogGrid.doTimeP" type="text" class="form-control" id="doTimeP"> -->
                                    <input id="dateTimeRange" type="text" class="form-control" [(ngModel)]="timeRange"
                                        name="startTimeRange" placeholder="请输入过滤开始时间">
                                </div>
                            </td>
                        </tr>
                    </table>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" (click)=" addData()">保存</button>
                    <!-- <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button> -->
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!--dialog end-->
</section>

<div class="modal" id="userModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">{{modalTitle}}</h4>
            </div>
            <div class="modal-body">
                    <div class="modal-body">
                        <input [(ngModel)]="searchUserStr" style="width:100%;" (ngModelChange)="searchUser()" >
                        <ul class="user-list">
                            <li *ngFor="let user of userList">
                                <input type="checkbox"  [checked]="userIsSelected(user)" (click)="addEmailUser(user)" > 
                                <span class="user-name-box">{{user.name}}</span>
                            </li>
                        </ul>
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-right" data-dismiss="modal">关闭</button>
            </div>
        </div>

    </div>
</div>